<template>
    <div>
        <div v-show="!detailShow">
            <CascadeSelect :msgType="1" @handleSearch="handleSearch" />
            <div class="madp-today-data">
                <div class="madp-totay-text">
                    <div>
                        <span class="madp-today-title">共有{{ tableData.length }}条群发内容</span>
                        <span class="madp-refresh">|</span>
                        <el-button icon="el-icon-refresh" @click="toSynData" type="primary" class="madp-refresh-btn">更新数据</el-button>
                        <span class="madp-refresh">更新于:</span>
                        <span class="madp-refresh">{{ syncWorkRoomTime }}</span>
                    </div>
                    <download-btn title="导出Excel" @click="exportExcelData" />
                </div>
                <el-table
                    :header-cell-style="{
                        background: 'rgb(255, 191, 191)',
                        color: 'rgb(44,44,44)'
                    }"
                    stripe
                    :data="tableData"
                    v-loading="loading"
                >
                    <el-table-column prop="messageType" label="消息类型" align="center">
                        <template slot-scope="scope">
                            <div class="madp-infoType">{{ scope.row.messageType }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="creator" label="创建者" align="center">
                        <template slot-scope="scope">
                            <div class="madp-table-cell">
                                <div class="madp-creator">
                                    <i class="el-icon-user-solid"></i>
                                    <span style="padding-left: 5px">
                                        {{ scope.row.creator }}
                                    </span>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sendTime" label="发送时间" align="center"></el-table-column>
                    <el-table-column prop="deliveryCount" label="送达客户数" align="center"></el-table-column>
                    <el-table-column prop="loseCount" label="失败客户数" align="center"></el-table-column>
                    <el-table-column prop="operation" label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button @click="toDetails(scope.row)" type="text">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 列表分页 -->
                <el-pagination
                    background
                    class="madp-black-pagination"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.current"
                    :page-sizes="[10, 20, 30, 50, 100]"
                    :page-size="page.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total"
                ></el-pagination>
            </div>
        </div>
        <senddetails v-if="detailShow" :detailObj="detailObj" @goBack="goBack"></senddetails>
    </div>
</template>
<script>
import senddetails from '@/views/operation-manage/group-records/send-details';
import CascadeSelect from '@/components/cascade-select/index';
import { getChatList, synData, exportExcel } from '@/api/operation-manage/group-records';
import { getDepartmentList } from '@/api/common-interface/department';
import DownloadBtn from '@/components/download-btn/';
export default {
    props: {
        activeName: String
    },
    components: {
        senddetails,
        DownloadBtn,
        CascadeSelect
    },
    data() {
        return {
            page: {
                current: 1, // 当前页
                size: 10,
                total: 0
            },
            employeeId: [],
            employees: [],
            detailShow: false,
            detailObj: {},
            //日期禁用
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now() - 8.64e7;
                }
            },
            refForm: {},
            tableData: [],
            selectedMembers: [], // 选中的人员
            showAddMember: false,
            memberVisible: false,
            loading: true,
            synData: [],
            //同步时间
            syncWorkRoomTime: '',
            form: {}
            //value: '',
        };
    },
    methods: {
        goBack() {
            this.detailShow = false;
            this.$emit('changeTabShow', true);
        },
        handleSearch(data) {
            this.refForm = JSON.parse(JSON.stringify(data));
            getChatList(data)
                .then((res) => {
                    this.loading = false;
                    if (res.data && res.data.code == 0) {
                        this.tableData = res.data.data.records;
                        this.page.total = res.data.data.total;
                        this.syncWorkRoomTime = res.data.data.extraProps.updateTimeByMassMsg;
                    }
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        getList(data) {
            if (!data) {
                this.page.current = 1;
                this.page.size = 10;
            }
            let obj = {
                ...this.refForm,
                current: this.page.current,
                size: this.page.size
            };
            getChatList(obj)
                .then((res) => {
                    this.loading = false;
                    if (res.data && res.data.code == 0) {
                        this.tableData = res.data.data.records;
                        this.page.total = res.data.data.total;
                        this.syncWorkRoomTime = res.data.data.extraProps.updateTimeByMassMsg;
                    }
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        //同步数据
        toSynData() {
            this.loading = true;
            let params = {
                type: 1
            };
            synData(params)
                .then((res) => {
                    this.loading = false;
                    if (res.data.code === 0) {
                        this.getList();
                    }
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        //详情
        toDetails(row) {
            this.detailObj = row;
            this.$emit('changeTabShow', false);
            this.detailShow = true;
        },
        //导出Excel
        exportExcelData() {
            let dto = {
                msgType: 1
            };
            exportExcel(dto).then((res) => {
                const blob = new Blob([res.data], {
                    type: 'application/ms-excel'
                });
                const reader = new FileReader();
                reader.readAsDataURL(blob);
                reader.onload = (e) => {
                    const a = document.createElement('a');
                    a.download = 'excel.xls';
                    a.href = e.target.result;
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                };
            });
        },
        handleSizeChange(val) {
            this.page.size = val;
            this.getList(this.page);
        },
        handleCurrentChange(val) {
            this.page.current = val;
            this.getList(this.page);
        }
    }
};
</script>
<style lang="scss" scoped>
.madp-today-data {
    margin: 15px 0;
}
.madp-totay-text {
    margin: 15px 0;
    display: flex;
    justify-content: space-between;
}
.madp-today-title {
    font-size: 16px;
    font-weight: 600;
    padding-right: 10px;
}
.madp-form-group {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.madp-creator {
    padding: 0 5px;
    border: 0.5px solid #ccc;
    border-radius: 4px;
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
}
.el-icon-user-solid {
    color: #ed5555;
}
.madp-infoType {
    color: rgb(236, 157, 10);
}
.madp-refresh,
.el-icon-refresh {
    padding-right: 10px;
    line-height: 36px;
    font-size: 12px;
}
.madp-refresh-btn {
    margin-right: 10px;
}
/deep/ .el-date-editor .el-range-separator {
    width: 25px !important;
}
.madp-black-pagination {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: 10px;
}
.madp-table-cell {
    display: flex;
    justify-content: center;
}
</style>
